<!--
 * @Description:放大镜css
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-19 22:06:51
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>放大镜css</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 300px;
			height: 300px;
			margin: 100px;
			background: prink;
			border: 1px solid #ccc;
			position: relative;
		}

		.small {
			position: relative;
			width: 300px;
			height: 300px;
		}

		.small img {
			width: 300px;
			height: 300px;
		}

		.big {
			width: 450px;
			height: 450px;
			position: absolute;
			top: 0;
			left: 320px;
			border: 1px solid #ccc;
			overflow: hidden;
			display: none;
		}

		.big img {
			position: absolute;
			top: 0;
			left: 0;
		}

		.mask {
			width: 100px;
			height: 100px;
			background: plum;
			position: absolute;
			top: 0;
			left: 0;
			cursor: move;
			display: none;

		}
	</style>
	<script>
		window.onload = function () {
			var fdj = document.getElementById("fdj")
			var small = fdj.children[0];
			var big = fdj.children[1];
			var mask = small.children[1];
			var bigImage = big.children[0]

			small.onmouseover = function () {
				mask.style.display = 'block';
				big.style.display = "block";
			}
			small.onmouseout = function () {
				mask.style.display = 'none';
				big.style.display = "none";
			}

			//鼠标在small内移动
			var x = 0,
				y = 0;
			small.onmousemove = function (event) {
				var event = event || window.event;
				x = event.clientX - this.offsetParent.offsetLeft -Math.floor( mask.offsetWidth / 2);
				y = event.clientY - this.offsetParent.offsetTop - Math.floor(mask.offsetHeight / 2);
				if (x < 0) {
					x = 0
				} else if (x > small.offsetWidth - mask.offsetWidth) {
					x = small.offsetWidth - mask.offsetWidth
				}

				if (y < 0) {
					y = 0
				} else if (y > small.offsetHeight - mask.offsetHeight) {
					y = small.offsetHeight - mask.offsetHeight
				}
				//计算父子
				console.log("ssss", x)
				mask.style.left = x + "px"
				mask.style.top = y + "px"

				bigImage.style.left = -x * big.offsetWidth/ (small.offsetWidth - Math.floor(small.offsetWidth/2)+8)+ "px"
				bigImage.style.top = -y * big.offsetHeight/small.offsetHeight+ "px"
			}
		}
	</script>
</head>

<body>
	<div class="box" id="fdj">
		<!-- 小盒子 -->
		<div class="small">
			<img src="./img/1.jpg" alt="">
			<div class="mask"></div>
		</div>
		<!-- 大盒子 -->
		<div class="big">
			<img src="./img/1.jpg" alt="">
		</div>


	</div>

</body>

</html>